<template>
  <a-row type="flex">
    <a-col flex="420px">
      <div class="pl-2 pr-2 radius-12 bg-fff flex align-center justify-between">
        <div class="flex align-center">
          <div class="color-primary">
            <span class="weight-600">步骤1</span>
            <span class="pl-1">AI 创作</span>
          </div>
          <div style="width: 40px;" class="ml-2 mr-2">
            <a-divider style="border-color: #A1A6B0" dashed />
          </div>
          <div class="color-2">
            <span class="weight-600">步骤2</span>
            <span class="pl-1">自定义调整</span>
          </div>
        </div>
        <a-button shape="round">上一步</a-button>
      </div>
      <div class="mt-1 bg-fff radius-12 view-container">
        <div class="title">效果图</div>
        <a-image :height="240" :src="image" />
      </div>
      <div class="mt-1 bg-fff radius-12 p-2">
        <div class="flex align-center justify-between">
          <div>素材库</div>
          <div class="flex align-center">
            <div>分类筛选</div>
            <a-select
              ref="select"
              class="w-120 ml-1"
            >
              <a-select-option value="jack">全部</a-select-option>
            </a-select>
          </div>
        </div>
        <Draggable
          :list="dragList"
          ghost-class="ghost"
          :force-fallback="true"
          :group="{ name: 'list' }"
          :sort="false"
          itemKey="id"
          class="flex flex-1 flex-wrap"
          @end="onEnd" 
        >
          <template #item="{ element }">
            <div class="item move mt-1" style="width: 33%">
              <div class="pattern-card">
                <a-image
                  :width="118"
                  src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
                />
              </div>
            </div>
          </template>
        </Draggable>
      </div>
    </a-col>
    <a-col flex="auto" class="pl-1 flex flex-1 flex-column">
      <a-row type="flex" style="height: 640px;" class="pb-2">
        <a-col flex="auto" class="flex flex-1 flex-column pr-1">
          <div class="flex justify-end">
            <div class="pl-2 pr-2 pt-1 pb-1 radius-12 bg-fff flex align-center">
              <div class="flex align-center pointer">
                <img class="icon-30 mr" src="@/assets/image/reset.png"/>
                <span>一键重置</span>
              </div>
              <a-divider class="ml-2 mr-2" type="vertical" style="height: 24px; background-color: #D2D8E2" />
              <div class="flex align-center pointer">
                <img class="icon-30 mr" src="@/assets/image/exchange.png"/>
                <span>切换为</span>
                <span class="color-primary">分体视图</span>
              </div>
            </div>
          </div>
          <div class="flex flex-1 justify-center align-center">
            <div style="width: 400px; height: 400px; background: red; position: reactive;">
            </div>
          </div>
          
          <!-- <Draggable
            :list="widgetList"
            :sort="false"
            ghost-class="ghost"
            itemKey="id"
            :force-fallback="true"
            group="list"
            :fallback-class="true"
            :fallback-on-body="true"
            style="width: 400px; height: 400px; background: red; position: reactive;"
            v-on:mousemove="mouseMoveHandle"
          >
            <template #item="{ element }">
              <div style="position: absolute;">
                <label class="move">{{ element.name }}</label>
              </div>
            </template>
          </Draggable> -->
          <!-- <img src="@/assets/image/modal.png" /> -->
        </a-col>
        <a-col flex="320px">
          <div class="pl-2 pr-2 pt-1 pb-1 radius-12 bg-fff flex align-center justify-around">
            <a-button shape="round" class="w-130">导出生产文件</a-button>
            <a-button type="primary" shape="round" class="w-130 flex justify-center">生成AI渲染效果图</a-button>
          </div>
          <div class="mt-1" style="background: #F5F5FA;">
            <a-collapse expandIconPosition="right" :bordered="false">
              <a-collapse-panel key="2" :style="customStyle">
                <template #header>
                  <div>
                    <img class="icon-30 mr-1" src="@/assets/image/tiaoseban.png">
                    <span class="weight-600">调色板</span>
                  </div>
                </template>
                <template #extra>
                  <span class="font-sm">展开</span>
                </template>
                <div class="border-top pt-1">
                  <div>
                    衣服-大框
                  </div>
                  <div class="mt-1 border radius-4 p-1 setting-card">
                    <div class="setting-card-item">
                      <div class="title">上衣</div>
                      <div>111</div>
                    </div>
                  </div>
                </div>
              </a-collapse-panel>
              <a-collapse-panel key="1" :style="customStyle">
                <template #header>
                  <div>
                    <img class="icon-30 mr-1" src="@/assets/image/huawen.png">
                    <span class="weight-600">花纹</span>
                  </div>
                </template>
                <p>{{ text }}</p>
              </a-collapse-panel>
            </a-collapse>
          </div>
        </a-col>
      </a-row>
      <div class="flex flex-1 pl-2 pr-2 pt-1 pb-1 radius-12 bg-fff">
        <div class="flex align-center">
          <div class="flex flex-column align-center justify-center mr-2">
            <div class="flex align-center">
              <span>历史记录</span>
              <img class="icon-16 ml" src="@/assets/image/ask.png"/>
            </div>
            <div class="color-6">最多<span class="weight-600">5</span>个</div>
          </div>
          <a-divider type="vertical" style="height: 70px; background-color: #E6EAEE" />
          <div class="flex justify-center align-center pattern-card border radius-12 ml-2 border-primary">
            <img style="width: 70px" src="@/assets/image/1_2.png"/>
          </div>
          <div class="flex justify-center align-center pattern-card border radius-12 ml-2">
            <img style="width: 70px" src="@/assets/image/1_3.png"/>
          </div>
        </div>
      </div>
    </a-col>
  </a-row>
</template>

<script lang="ts">
  import { SearchOutlined } from '@ant-design/icons-vue';
  import { defineComponent, getCurrentInstance, onMounted, reactive, ref } from 'vue'
  import { useStore } from '@/store'
  import { getUser } from '@/utils/token'
  import image from '@/assets/image/view.png'
  import Draggable from 'vuedraggable'
  export default defineComponent({
    name: 'Welcome',
    components: {
      SearchOutlined,
      Draggable
    },
    setup() {
      const { proxy }: any = getCurrentInstance()
      const checkIdx: any = ref(-1)
      const moduleType: any = ref('1')

      const dragList:any = reactive([
        { name: "单行文本", id: 1 },
        { name: "多行文本", id: 2 },
        { name: "计数器", id: 3 },
        { name: "单选框组", id: 4 },
      ])
      
      const widgetList:any = reactive([
        { name: "多行文本", id: 2 },
      ])
      onMounted(() => {
      })

      const cancelHandle = () => {
        proxy.$router.go(-1)
      }

      const checkHandle = (idx) => {
        checkIdx.value = idx
        console.error(checkIdx.value)
      }

      const mouseMoveHandle = (event) => {
        
        console.error('event====>', event)
      }

      const onEnd = (e) => {
        console.error('----e', e)
      }
      return {
        onEnd,
        moduleType,
        checkIdx,
        checkHandle,
        image: image,
        cancelHandle,
        customStyle: "border: 0; background: #fff; border-radius: 12px; margin-bottom: 12px;",
        labelCol: { span: 3 },
        wrapperCol: { span: 12 },
        dragList,
        widgetList,
        mouseMoveHandle,
        array: ['https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png', 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png', 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png', 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png', 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png']
      }
    },
    computed: {
      columns() {
        return [
          {
            title: '姓名',
            dataIndex: 'name',
            key: 'name',
          },
          {
            title: '年龄',
            dataIndex: 'age',
            key: 'age',
          },
          {
            title: '住址',
            dataIndex: 'address',
            key: 'address',
          },
        ]
      }
    }
  })
</script>

<style scoped lang="less">
  :deep(.ant-descriptions-small .ant-descriptions-row > th, .ant-descriptions-small .ant-descriptions-row > td) {
    margin-bottom: 0;
  }
  :deep(.ant-form-item) {
    margin-bottom: 16px;
  }
  :deep(.ant-form-item-label > label) {
    font-weight: normal;
  }
  :deep(.ant-collapse-borderless) {
    background: transparent;
  }
  :deep(.ant-collapse-header) {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  :deep(.ant-collapse-borderless > .ant-collapse-item > .ant-collapse-content > .ant-collapse-content-box) {
    padding-top: 0;
  }
  .form-container {
    display: flex;
    justify-content: space-between;
  }

  .active {
    position: relative;
    border: 2px solid #4075E5;
  }
  .active::after {
    position: absolute;
    content: "";
    right: -2px;
    top: -2px;
    width: 36px;
    height: 36px;
    z-index: 99;
    background: url('@/assets/image/check.png');
    background-size: cover;
  }
  .cloth-img {
    width: 150px;
    height: 240px;
    background-image: url('../../assets/image/1_1.png');
    background-repeat:  no-repeat;
    background-position: center center;
    background-size: contain;
  }
  .color-item {
    display: flex;
    width: 50%;
    align-items: center;
  }
  .color-block {
    width: 44px;
    height: 44px;
    margin-right: 10px;
  }
  .pattern-card {
    position: relative;
    width: 120px;
    height: 120px;
    border: 1px solid #E6EAEE;
    cursor: pointer;
  }
  .mask {
    display: none;
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
    background: rgba(0, 0, 0, 0.3);
    .btn {
      width: 64px;
      height: 40px;
      line-height: 16px;
      border-radius: 30px;
      background: rgba(255,255,255,0.8);
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .pattern-card:hover .mask {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .view-container {
    position: relative;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    .title {
      position: absolute;
      left: 20px;
      top: 20px;
    }
  }
  .setting-card {
    &-item {
      .title {
        position: relative;
        padding-left: 12px;
      }
      .title::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        width: 6px;
        height: 6px;
        transform: translate(0, -50%);
        background: red;
        border-radius: 50%;
      }
    }
  }
</style>
